<template>
  <div>
    <div id="addressList" v-loading="loading" element-loading-text="loading...">
      <div class="header">
        <a @click="backMethod">
          <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
        </a>
        <h3 style="color: white;">收货地址</h3>
      </div>
      <div>
        <div class="newAddress"><span style="font-size: 20px;" @click="addNewAddress">添加新地址</span></div>
        <div class="myAddress" slot="empty">
          <li v-for="item in addressList" :key="item.consigneeId">
            <div class="itemInfo">
              <div style="display: flex;align-items:baseline;">
                <h2 style="width: 27%;font-size: 20px;text-align: left;">{{item.consigneeName}}</h2>
                <span style="height: 100%;color: #d5d3d4;">{{item.phoneNum}}</span>
              </div>
              <p style="font-size: 18px;text-align: left;">{{item.address}}</p>
            </div>
            <span @click="invokeDelMethod(item.consigneeId)"
            style="font-size: 20px;box-sizing: border-box;padding: 15px 5px;width: 20%;border-left: 1px solid #d5d3d4; color: #b2b0b1;">删除</span>
          </li>
          <el-empty id="emptyPage" description="请添加新的地址" style="display: flex;"></el-empty>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <span>确定要删除这个地址吗？</span>
            <span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around;">
              <el-button @click="dialogVisible = false; delItemId='';">取 消</el-button>
              <el-button type="primary" @click="delAddress()">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  	name: "",
  	components: {
  	},
  	data() {
  		return {
        user:{},
        loading:false,
        addressList:[],
        dialogVisible:false,
        delItemId:"",
  		}
  	},
    created() {

    },
    mounted() {
      this.myAddress()
    },
    methods:{
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null){
          this.$router.push({
            path: lastPage
          });
        }{
          this.$router.push({
            path: '/home/mine'
          });
        }
      },
      //收货地址
      myAddress(){
        var self = this
        if(this.isLogin()){
          var user = JSON.parse(sessionStorage.getItem("visitor"));
          this.$http.post("/api/CakeShop/MemberInfo/getConsigneeByUserCode",
              user
          )
          .then(
            function(res) {
              if(res.data.address != null && res.data.address != []){
                document.getElementById("emptyPage").style.display = 'none';
                self.addressList = res.data.address;
              }
            },
          )
        }
      },

      //添加新地址方法
      addNewAddress(){
        var self = this
        sessionStorage.setItem("lastPage","/addressManage")
        this.$router.push({
          path: "/addNewAddress"
        });
      },


      //判断是否登录方法
      isLogin(){
        this.user = JSON.parse(sessionStorage.getItem("visitor"));
        if(this.user == null || this.user == {}){
          return false
        }
        return true;
      },
      //确认执行删除方法
      invokeDelMethod(consigneeId){
        console.log(consigneeId);
        this.dialogVisible = true;
        this.delItemId = consigneeId;
      },
      //根据地址id删除地址
      delAddress(){
        var consigneeId = parseInt(this.delItemId)
        console.log(consigneeId)
        var self = this;
        this.$http.post("/api/CakeShop/MemberInfo/delConsignee",
        {consigneeId:consigneeId})
        .then((res=>{
          if(res.data.code == 200){
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                // this.getOrderList(sessionStorage.getItem("page"))
                self.dialogVisible = false;
                self.myAddress();
              }
            })
          }else{
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }))
      },
      //关闭删除对话框方法
      handleClose(){
        this.dialogVisible = false
      }
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
  }
  .header{
    display: flex;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
  }
  #addressList{

  }
  .newAddress{
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0px 15px;
    box-sizing: border-box;
  }
  .myAddress{
    width: 100%;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
  }
  .myAddress li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 7px 0;
    border-bottom: 1px solid #e0dedf;
  }
  .myAddress li:first-child{
    border-top: 1px solid #e0dedf;
  }
  .myAddress .itemInfo{
    width: 80%;
    padding: 0 20px;
  }
</style>
